<template>
  <view :style="{ height: pageHeight, overflow: 'hidden' }">
    <search @search="disableScroll" />
    <!-- 焦点图 -->
    <swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator :url="item.navigator_url">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 导航条 -->
    <view class="navs">
      <navigator
        v-for="item in categaryList"
        :key="item.name"
        :open-type="item.open_type || 'navigate'"
        :url="item.navigator_url ? '/pages/category/index' : `/subpkg/pages/list/index?query=${item.name}`"
      >
        <image :src="item.image_src"></image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floors">
      <view class="floor" v-for="item in floorList" :key="item.floor_title.name">
        <view class="title">
          <image :src="item.floor_title.image_src"></image>
        </view>
        <view class="items">
          <navigator
            v-for="product in item.product_list"
            :key="product.name"
            :url="`/subpkg/pages/list/index?query=${product.name}`"
          >
            <image :src="product.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 回到顶部 -->
    <view class="goTop icon-top" @click="goTop"></view>
  </view>
</template>

<script>
import search from '@/components/search';
// import { $http } from '@escook/request-miniprogram';
export default {
  data() {
    return {
      pageHeight: 'auto',
      swiperList: [],
      categaryList: [],
      floorList: []
    };
  },

  components: {
    search
  },
  onLoad() {
    this.getSwiperList();
    this.getCatitems();
    this.getFloorList();
  },
  // 下拉刷新
  async onPullDownRefresh() {
    // await Promise.all([this.getSwiperList(), this.getCatitems(), this.getFloorList()]);
    await this.getSwiperList();
    await this.getCatitems();
    await this.getFloorList();
    uni.stopPullDownRefresh();
  },
  methods: {
    async getSwiperList() {
      // uni 原生请求
      // await 同步方式获取数据
      // const swiperList = await uni.request({
      //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
      // });
      // 按需导入请求
      // const swiperList = await $http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata');
      // uni.$http
      const res = await uni.$http.get('/api/public/v1/home/swiperdata');
      if (res.data.meta.status !== 200) return uni.$showToast();
      this.swiperList = res.data.message;
    },
    async getCatitems() {
      const res = await uni.$http.get('/api/public/v1/home/catitems');
      if (res.data.meta.status !== 200) return uni.$showToast();
      this.categaryList = res.data.message;
    },
    async getFloorList() {
      const res = await uni.$http.get('/api/public/v1/home/floordata');
      if (res.data.meta.status !== 200) return uni.$showToast();
      this.floorList = res.data.message;
    },
    disableScroll(ev) {
      this.pageHeight = ev.pageHeight + 'px';
    },
    // 滚动到顶部
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }
};
</script>

<style scoped lang="scss">
.banner {
  width: 100%;
  height: 340rpx;

  image {
    width: 100%;
    height: 340rpx;
  }
}

.navs {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 44rpx;

  image {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor {
  .title {
    width: 750rpx;
    height: 60rpx;
    padding: 20rpx 0 0 8rpx;
    background-color: #f4f4f4;
  }

  .items {
    padding: 20rpx 16rpx;
    overflow: hidden;

    navigator {
      width: 193rpx;
      height: 188rpx;
      margin-left: 10rpx;
      margin-bottom: 10rpx;
      float: left;
    }

    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
      margin-left: 0rpx;
    }

    navigator:nth-child(2),
    navigator:nth-child(5) {
      width: 273rpx;
    }
  }

  &:first-child {
    .items {
      navigator {
        width: 233rpx;
      }
    }
  }
}

.goTop {
  position: fixed;
  bottom: 30rpx;
  /* #ifdef H5 */
  bottom: 65px;
  /* #endif */
  right: 30rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  font-size: 48rpx;
  color: #666;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>